<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input id="hInput">
</body>
<script>
  // 第一步：获取元素
  const inputDom = document.getElementById('hInput')

  // 第二步：创建函数传递延时和回调
  function debounce(dalay, fn) {
    // 声明延时
    let timer
    // 返回一个函数，传递参数数据
    return function (value) {
      // 判断是否有延时，有延时则清空延时
      if (timer) {
        clearTimeout(timer)
      }
      // 没有延时则设置延时
      timer = setTimeout(() => {
        // 输出回调放入数据
        fn(value)
      }, dalay);
    }
  }

  // 第三步：元素监听，执行防抖
  inputDom.addEventListener('input', debounce(1000, (e) => {
    console.log(e.target.value)
  }))
</script>

</html>